<template>
    <div id="detail">
        <detail-navbar class="detail-nav" @titleClick="titleClick" ref="navbar"/>
        <b-scroll class="content" ref="scroll" :probeType="3" @scroll="scroll">
            <detail-swiper :top-images="topImages"/>
            <detail-base-info :goods="goods"/>
            <detail-shop-info :shop="shop"/>
            <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
            <detail-param-info :param-info="paramInfo" ref="paramInfo"/>
            <detail-comment-info :comment-info="commentInfo" ref="commentInfo"/>
            <goods-list :goods="recommends" ref="goodsList"/>
        </b-scroll>
        <back-top v-show="display" @click.native="backTop"/>
        <detail-bottom-bar @addToCart="addToCart"/>
    </div>
</template>

<script>
    import DetailNavbar from './childComponents/DetailNavbar';
    import DetailSwiper from './childComponents/DetailSwiper';
    import DetailBaseInfo from './childComponents/DetailBaseInfo';
    import DetailShopInfo from './childComponents/DetailShopInfo';
    import DetailGoodsInfo from './childComponents/DetailGoodsInfo';
    import DetailParamInfo from './childComponents/DetailParamInfo';
    import DetailCommentInfo from './childComponents/DetailCommentInfo';
    import DetailBottomBar from './childComponents/DetailBottomBar';

    import BScroll from 'common/scroll/Scroll';
    import GoodsList from 'content/goods/GoodsList';

    import {iteImgLoadMixin, backTopMixin} from '@/common/mixin';
    import {getDetail, Goods, Shop, GoodsParam, getRecommend} from "network/detail";
    import {debounce} from "@/common/utils";

    import {mapActions} from 'vuex'

    export default {
        name: "Detail",
        components: {
            BScroll,
            DetailNavbar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            DetailGoodsInfo,
            DetailParamInfo,
            DetailCommentInfo,
            GoodsList,
            DetailBottomBar
        },
        mixins: [iteImgLoadMixin, backTopMixin], //混入
        data() {
            return {
                result: null,
                topImages: [],
                goods: {},
                shop: {},
                detailInfo: {},
                paramInfo: {},
                commentInfo: {},
                recommends: [],
                themeTopY: [],
                getThemeTopY: null,
                currentIndex: 0
            }
        },
        created() {
            //获取详情数据
            this.getDetail();

            //获取推荐数据
            this.getRecommend();

            //给themeTOPY赋值
            this.getThemeTopY = debounce(() => {
                this.themeTopY = [];
                this.themeTopY.push(0);
                this.themeTopY.push(this.$refs.paramInfo.$el.offsetTop);
                this.themeTopY.push(this.$refs.commentInfo.$el.offsetTop);
                this.themeTopY.push(this.$refs.goodsList.$el.offsetTop);
                this.themeTopY.push(this.themeTopY[this.themeTopY.length - 1] + 100);
            }, 200)
        },
        mounted() {

        },
        methods: {
            ...mapActions([
                'cartInfo' //将vuex的cartInfo函数映射到当前methods中
            ]),
            imageLoad() {
                this.newRefresh();

                this.getThemeTopY();
            },
            getDetail() {
                getDetail(this.$route.params.iid)
                    .then(res => {
                        // console.log(res);
                        const data = res.result;
                        //获取顶部的图片轮播数据
                        this.topImages = data.itemInfo.topImages;

                        //获取商品信息
                        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

                        //获取店铺信息
                        this.shop = new Shop(data.shopInfo);

                        //获取商品详情信息
                        this.detailInfo = data.detailInfo;

                        //获取参数信息
                        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);

                        //获取评论信息
                        if (data.rate.cRate !== 0) {
                            this.commentInfo = data.rate.list[0];
                        }

                        //值不对，图片尚未加载完成
                        // this.$nextTick(() => {
                        //     this.themeTopY = [];
                        //
                        //     this.themeTopY.push(
                        //         0,
                        //         this.$refs.paramInfo.$el.offsetTop - 44,
                        //         this.$refs.commentInfo.$el.offsetTop - 44,
                        //         this.$refs.goodsList.$el.offsetTop - 44
                        //     )
                        // })
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            getRecommend() {
                getRecommend()
                    .then(res => {
                        this.recommends = res.data.list;
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            titleClick(index) {
                this.$refs.scroll.scrollTo(0, -this.themeTopY[index], 500);
            },
            scroll(position) {
                if (-position.y > 1000) {
                    this.display = true
                }else {
                    this.display = false
                }

                let positionY = -position.y;
                let length = this.themeTopY.length;
                for (let i = 0; i < length; i++) {
                    if (this.currentIndex !== i && (positionY >= this.themeTopY[i] && positionY < this.themeTopY[i + 1])) {
                        this.currentIndex = i;
                        this.$refs.navbar.currentIndex = this.currentIndex;
                    }
                }
            },
            //将商品添加到购物车
            addToCart() {
                //获取商品的信息
                const product = {};
                product.image = this.topImages[0];
                product.title = this.goods.title;
                product.desc = this.goods.desc;
                product.price = this.goods.nowPrice;
                product.iid = this.$route.params.iid;

                //将商品添加到购物车里
                this.cartInfo(product)
                    .then(res => {
                        this.$toast.show(res)
                    })
            }
        },
        destroyed() {
            this.$bus.$off('imgLoad', this.itemImgLoad)
        }
    }
</script>

<style scoped>
    #detail {
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    }

    .detail-nav {
        position: relative;
        z-index: 99;
        background-color: #fff;
    }

    .content {
        position: absolute;
        top: 44px;
        bottom: 60px;
    }
</style>